<script setup>
import { ref, onMounted, computed } from 'vue'
import { use } from "echarts/core"
import { CanvasRenderer } from "echarts/renderers"
import { BarChart } from "echarts/charts"
import {
  GridComponent,
  TooltipComponent,
  TitleComponent
} from "echarts/components"
import VChart from "vue-echarts"

// 注册必要的组件
use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent,
  TitleComponent
])

// 使用时长统计
const usageStats = ref({
  today: '3.5小时',
  week: '24.8小时',
  month: '96.5小时',
  total: '486小时'
})

// 播放记录统计
const playStats = ref({
  songs: 1286,
  artists: 156,
  genres: 18,
  playlists: 24
})

// 每日使用时长
const dailyUsage = ref([
  { day: '周一', hours: 3.5 },
  { day: '周二', hours: 4.2 },
  { day: '周三', hours: 2.8 },
  { day: '周四', hours: 3.9 },
  { day: '周五', hours: 5.1 },
  { day: '周六', hours: 6.2 },
  { day: '周日', hours: 4.8 }
])

// 常听歌手
const topArtists = ref([
  {
    name: '周杰伦',
    plays: 286,
    hours: 14.5,
    genres: ['流行', '说']
  },
  {
    name: '陈奕迅',
    plays: 168,
    hours: 8.2,
    genres: ['流行', '粤语']
  },
  {
    name: '林俊杰',
    plays: 145,
    hours: 7.1,
    genres: ['流行', 'R&B']
  }
])

// 音乐类型分布
const genreStats = ref([
  { name: '流行', percentage: 45 },
  { name: '摇滚', percentage: 20 },
  { name: '民谣', percentage: 15 },
  { name: '电子', percentage: 10 },
  { name: '古典', percentage: 10 }
])

// 使用场景分析
const sceneAnalysis = ref([
  {
    scene: '工作学习',
    percentage: 35,
    peak: '09:00-12:00',
    topGenre: '轻音乐'
  },
  {
    scene: '运动健身',
    percentage: 25,
    peak: '18:00-20:00',
    topGenre: '电子'
  },
  {
    scene: '休闲放松',
    percentage: 40,
    peak: '20:00-23:00',
    topGenre: '流行'
  }
])

// 图表实例
const chartRef = ref(null)

// 定义颜色变量
const colors = {
  primary: '#6200EA',
  secondary: '#7C4DFF'
}

// 图表配置
const chartOption = computed(() => ({
  backgroundColor: 'transparent',
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: '{b}: {c} 小时',
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    borderColor: 'rgba(255, 255, 255, 0.1)',
    textStyle: {
      color: '#fff'
    }
  },
  grid: {
    top: '10%',
    left: '3%',
    right: '3%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: dailyUsage.value.map(item => item.day),
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)'
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#B3B3B3',
      interval: 0
    }
  },
  yAxis: {
    type: 'value',
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)',
        type: 'dashed'
      }
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#B3B3B3',
      formatter: '{value} h'
    }
  },
  series: [{
    name: '收听时长',
    type: 'bar',
    data: dailyUsage.value.map(item => item.hours),
    barWidth: '40%',
    itemStyle: {
      borderRadius: [4, 4, 0, 0],
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0,
          color: colors.primary
        }, {
          offset: 1,
          color: colors.secondary
        }]
      }
    },
    emphasis: {
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: colors.secondary
          }, {
            offset: 1,
            color: colors.primary
          }]
        }
      }
    }
  }]
}))
</script>

<template>
  <div class="stats-page">
    <!-- 使用时长概览 -->
    <div class="overview-section">
      <div 
        v-for="(value, key) in usageStats"
        :key="key"
        class="stat-card"
      >
        <div class="stat-value">{{ value }}</div>
        <div class="stat-label">
          {{ 
            key === 'today' ? '今日收听' :
            key === 'week' ? '本周收听' :
            key === 'month' ? '本月收听' : '总收听'
          }}
        </div>
      </div>
    </div>

    <!-- 播放记录统计 -->
    <div class="play-stats">
      <div 
        v-for="(value, key) in playStats"
        :key="key"
        class="play-stat-item"
      >
        <div class="stat-icon">
          {{ 
            key === 'songs' ? '🎵' :
            key === 'artists' ? '🎤' :
            key === 'genres' ? '🎼' : '📑'
          }}
        </div>
        <div class="stat-info">
          <div class="stat-value">{{ value }}</div>
          <div class="stat-label">
            {{ 
              key === 'songs' ? '首歌曲' :
              key === 'artists' ? '位歌手' :
              key === 'genres' ? '种流派' : '张歌单'
            }}
          </div>
        </div>
      </div>
    </div>

    <!-- 每日使用统计 -->
    <div class="usage-chart">
      <h2>每日收听时长</h2>
      <div class="chart-container">
        <v-chart 
          ref="chartRef"
          class="chart"
          :option="chartOption"
          :autoresize="true"
        />
      </div>
    </div>

    <!-- 常听歌手 -->
    <div class="artists-section">
      <h2>常听歌手</h2>
      <div class="artists-list">
        <div 
          v-for="artist in topArtists"
          :key="artist.name"
          class="artist-card"
        >
          <div class="artist-info">
            <h3>{{ artist.name }}</h3>
            <div class="artist-stats">
              <span>{{ artist.plays }}次播放</span>
              <span>{{ artist.hours }}小时</span>
            </div>
            <div class="artist-genres">
              <span 
                v-for="genre in artist.genres"
                :key="genre"
                class="genre-tag"
              >
                {{ genre }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 音乐类型分布 -->
    <div class="genres-section">
      <h2>音乐类型分布</h2>
      <div class="genres-chart">
        <div 
          v-for="genre in genreStats"
          :key="genre.name"
          class="genre-bar"
        >
          <div class="genre-name">{{ genre.name }}</div>
          <div class="bar-track">
            <div 
              class="bar-fill"
              :style="{ width: `${genre.percentage}%` }"
            ></div>
          </div>
          <div class="genre-percentage">{{ genre.percentage }}%</div>
        </div>
      </div>
    </div>

    <!-- 使用场景分析 -->
    <div class="scenes-section">
      <h2>使用场景分析</h2>
      <div class="scenes-grid">
        <div 
          v-for="scene in sceneAnalysis"
          :key="scene.scene"
          class="scene-card"
        >
          <div class="scene-header">
            <h3>{{ scene.scene }}</h3>
            <div class="scene-percentage">{{ scene.percentage }}%</div>
          </div>
          <div class="scene-details">
            <div class="detail-item">
              <span class="detail-label">高峰时段</span>
              <span class="detail-value">{{ scene.peak }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">主要类型</span>
              <span class="detail-value">{{ scene.topGenre }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.stats-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* 使用时长概览样式 */
.overview-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.stat-card {
  background-color: var(--bg-light);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
}

.stat-value {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  color: var(--text-gray);
  font-size: 0.9rem;
}

/* 播放记录统计样式 */
.play-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.play-stat-item {
  background-color: var(--bg-light);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stat-icon {
  font-size: 2rem;
}

.stat-info {
  flex: 1;
}

/* 每日使用统计样式 */
.usage-chart {
  background-color: var(--bg-light);
  border-radius: 16px;
  padding: 2rem;
}

.usage-chart h2 {
  margin: 0;
  margin-bottom: 2rem;
  color: var(--text-gray);
}

.chart-container {
  height: 300px;
  margin-top: 1rem;
  background-color: var(--bg-dark);
  border-radius: 8px;
  padding: 1rem;
}

.chart {
  width: 100%;
  height: 100%;
}

/* 常听歌手样式 */
.artists-section {
  background-color: var(--bg-light);
  border-radius: 16px;
  padding: 2rem;
}

.artists-section h2 {
  margin: 0;
  margin-bottom: 2rem;
  color: var(--text-gray);
}

.artists-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.artist-card {
  background-color: var(--bg-dark);
  border-radius: 12px;
  padding: 1.5rem;
}

.artist-info h3 {
  margin: 0;
  margin-bottom: 1rem;
}

.artist-stats {
  display: flex;
  gap: 1rem;
  color: var(--text-gray);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.artist-genres {
  display: flex;
  gap: 0.5rem;
}

.genre-tag {
  padding: 0.2rem 0.5rem;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--text-gray);
}

/* 音乐类型分布样式 */
.genres-section {
  background-color: var(--bg-light);
  border-radius: 16px;
  padding: 2rem;
}

.genres-section h2 {
  margin: 0;
  margin-bottom: 2rem;
  color: var(--text-gray);
}

.genres-chart {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.genre-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.genre-name {
  min-width: 80px;
}

.bar-track {
  flex: 1;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  transition: width 0.3s ease;
}

.genre-percentage {
  min-width: 50px;
  text-align: right;
  color: var(--text-gray);
  font-size: 0.9rem;
}

/* 使用场景分析样式 */
.scenes-section {
  background-color: var(--bg-light);
  border-radius: 16px;
  padding: 2rem;
}

.scenes-section h2 {
  margin: 0;
  margin-bottom: 2rem;
  color: var(--text-gray);
}

.scenes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.scene-card {
  background-color: var(--bg-dark);
  border-radius: 12px;
  padding: 1.5rem;
}

.scene-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.scene-header h3 {
  margin: 0;
}

.scene-percentage {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
}

.scene-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  color: var(--text-gray);
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .overview-section,
  .play-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .chart-container {
    height: 200px;
  }

  .bar-value {
    width: 30px;
    font-size: 0.7rem;
  }
}
</style>